<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>	BOM</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
      body{
      	/*height: 1000px;*/
      }
      .div1{
      	width: 120px;
      	height: 100px;
      	padding: 10px;
      	border: 2px solid blue;
      }
      .div2{
      	width: 100px;
      	height: 200px;
      	padding: 10px;
      	background: #ccc;
      }
    </style>
</head>
<div class="div1"></div>

<input type="button" value="打开窗口" id="j_submit"/>
<body>

<script type="text/javascript">
/*
 * BOM ： Browser Object Model 浏览器对象模型
 * 
 * open(页面URL，打开方式)： 打开一个新的窗口  = window.open()
 * 
 * 可视区尺寸：document.documentElement.clientWidth     document.documentElement.clientHeight  文档元素宽高
 * 滚动距离： （document.body.scrollTop  document.body.scrollLeft  谷歌浏览器认为滚动条是body的,jianrong  d  hua  ）  document.documentElement.scrollTop    document.documentElement.scrollLeft
 * 内容高度： document.body.scrollHeight
 * 文档高度：  （推荐document.body.offsetHeight)  document.documentElement.offsetHeight    
 * */

    window.onload=function(){
       var oSubmit = document.getElementById("j_submit");
       oSubmit.onclick = function(){
       	    opener = window.open("http://www.baidu.com");
       		opener.document.body.style.background = "red";
       }
       document.onclick = function(){
       	//var st = document.documentElement.scrollTop || document.body.scrollTop;
       	//var st = document.documentElement.clientWidth;
       	var st = document.documentElement.offsetHeight;
       	 alert(st);
       }
    }
</script>
</body>

</html>
